<template>
  <div>
    <van-nav-bar
        title="资讯详情页面"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <h1>{{ items.title }}</h1> <!-- 标题 -->
    <div class="user-info">
      <span class="user-avatar" :style="{
        backgroundImage: `url(${users.imageUrl})`,
        backgroundSize: 'contain',
        backgroundPosition: 'center' }"></span> <!-- 用户头像 -->
      <div>{{ items.author }}</div>
      <!-- 发布者信息 -->
    </div>
    <div>{{ items.publishDate }}</div>
    <div class="content">
      {{ items.content }}<!-- 内容 -->
    </div>
    <van-action-bar>
      <van-action-bar>
        <van-action-bar-icon
            icon="like-o"
            text="喜欢"
            :badge="items.likes"
            @click="addLike"
        />
        <van-action-bar-icon
            icon="star-o"
            text="收藏"
            :badge="items.collects"
            @click="addCollect"
        />
        <van-action-bar-icon
            icon="chat-o"
            text="评论"
            :badge="items.reviews"
            @click="showCommentPopup = true"
        />
      </van-action-bar>
    </van-action-bar>
    <!-- 弹出层评论表单 -->
    <van-popup v-model:show="showCommentPopup" position="bottom">
        <van-field
            v-model="content"
            name="comment"
            label="写入评论"
            placeholder="写下你的评论..."
            required
        />
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="addView">提交评论</van-button>
        </div>
    </van-popup>

  </div>

</template>

<script setup>
import {ref, onMounted} from 'vue';
import {useRoute} from 'vue-router';
import {get, post} from '../../util/request.js';
import {showToast} from 'vant';

// 获取当前路由信息
const route = useRoute();

// 定义接收的props不再需要，因为我们直接从路由中获取id
// const { id } = defineProps(['id']);

// 使用ref管理数据
const items = ref([]);
const users = ref([]);
const loading = ref(false);
const finished = ref(false);

const onClickLeft = () => history.back();
const id = route.params.id;
const showCommentPopup = ref(false); // 控制评论弹窗显示隐藏
// 在组件挂载后发起请求，使用路由参数id
onMounted(async () => {
  // 获取路由参数id
  try {
    const res = await get(`home/getNewsDetails/${id}`);
    if (res.code === 0) {
      items.value = res.data;
      loading.value = false; // 请求成功后应将加载状态设为false
      finished.value = true;
    } else {
      showToast("查询失败");
    }


    const res2 = await get("user/getUser");
    if (res2.code === 0) {
      users.value = res2.data;
    } else {
      showToast("查询失败");
    }

  } catch (error) {
    showToast("全部异常");
  };
});
const content = ref('');//评论

const addLike = () => {
  post('home/addLikes/').then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      showToast("点赞成功")
      window.location.reload();
    } else {
      showToast("点赞失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("点赞失败异常")
  });
  // 这里只是一个示例，实际应调用后端接口增加喜欢数，并在响应成功后更新likesBadge

};

// 收藏的逻辑类似
const addCollect = () => {
  get("home/addCollects").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      showToast("收藏成功")
      window.location.reload();
    } else {
      showToast("收藏失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("收藏失败异常")
  });
};
const newsId = ref(id);
const addView = () => {//评论
  post("home/addNewsReview", {newsId:newsId.value,content:content.value}).then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      showToast("评论成功")
      content.value = '';
      showCommentPopup.value = false;
      window.location.reload();
    } else {
      showToast("评论失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("评论失败异常")
  });
}




</script>

<style scoped>
/* 资讯标题 */
h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

/* 用户头像 */
.user-avatar {
  width: 40px; /* 调整头像大小 */
  height: 40px;
  border-radius: 50%; /* 圆形头像 */
}

/* 发布者信息 */
.user-info {
  display: flex;
  align-items: center;
  color: #a0a0a0;
  font-size: 14px;
  margin-bottom: 16px;
}

/* 内容区域 */
.content {
  padding: 16px;
  line-height: 1.6;
}

/* 图片 */
img {
  max-width: 100%;
  display: block;
  margin-bottom: 16px;
}




</style>